<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
/*		属性选择器*/
		/*a[href="baidu"]{
			color: black;
			text-decoration: none;
		}*/

/*		以 t 开头的属性值*/
		a[href^="t"]{
			color: #000;
			text-decoration: none;
		}
/*		以 g 结尾的属性值*/
		a[href$="g"]{
			color: black;
			text-decoration: none;
		}
/*		包含 ai 的属性值*/
		a[href*="ai"]{
			color: black;
			text-decoration: none;
		}
		div[class^="list"]{
			background-color: red;
		}
/*		选中自定义属性*/
		div[data-id]{
			background-color: blue;
		}

/*		伪元素选择器*/
/*		选中文章的第一行*/
		p::first-line{
			color: skyblue;
		}
/*		选中第一个字*/
		p::first-letter{
			font-size: 30px;
			font-weight: bold;
		}
/*		复制文字时 选中效果*/
		p::selection{
			background-color: pink;
		}
		body{
			height: 5000px;
		}
/*		设置整个滚动条的尺寸 如果为0 则不显示*/
		::-webkit-scrollbar{
			width: 100px;
/*			background-color: blue;*/
		}
/*		设置可拖动滑块的样式*/
		::-webkit-scrollbar-thumb{
			background-color: black;
			border-radius: 50%;
		}
/*		设置 滚动条两端 的按钮*/
		::-webkit-scrollbar-button{
			background-color: orange;
			height: 100px;
			border-radius: 50%;
		}

/*		因为早些时候 不同浏览器 对于css 的属性 适配 程度不同，为了确保兼容性 可以添加浏览器前缀 来确保css 的执行*/
/*		-webkit-  适配浏览器的写法*/
/*		-moz-  	  Firefox*/
/*		-o-		  Opera*/
	</style>
</head>
<body>
	<a href="baidu">百度</a>
	<a href="taobao">淘宝</a>
	<a href="jingdong">京东</a>

	<div class="list-item">
		111
	</div>
	<div class="header-only" data-id>
		<!-- data-id 自定义属性 -->
		222
	</div>
	<div class="list-only">
		333
	</div>



	<p>
		千万粉丝网红“旺仔小乔”最近摊上事了！原定 8 月 9 日在上海举办的首场个人演唱会，因“全程不露脸”“票价分级”等操作，直接让她的账号三天狂掉 28 万粉，评论区更是炸开了锅。

这场演唱会的票价设置从 268 元到 968 元不等，但最让网友破防的是——不露脸还分内外场？ 不少人吐槽：“不露脸怎么互动？听个响吗？”“翻唱起家，没几首原创，凭啥开演唱会？”“线上直播不香吗？非要线下割韭菜？”
	</p>
	<p>
		千万粉丝网红“旺仔小乔”最近摊上事了！原定 8 月 9 日在上海举办的首场个人演唱会，因“全程不露脸”“票价分级”等操作，直接让她的账号三天狂掉 28 万粉，评论区更是炸开了锅。

这场演唱会的票价设置从 268 元到 968 元不等，但最让网友破防的是——不露脸还分内外场？ 不少人吐槽：“不露脸怎么互动？听个响吗？”“翻唱起家，没几首原创，凭啥开演唱会？”“线上直播不香吗？非要线下割韭菜？”
	</p>

	<!-- css 3 -->

	<!-- html5 -->
</body>
</html>